<template>
  <!--  -->
  <el-image ref="img" :src="_real_url" :preview-src-list="_real_preview" class="defaultImageSize " v-bind="$attrs"
    v-on="$listeners">
    <template v-slot:error>
      <div class="image_error_div flex_center">
        <i class="el-icon-picture-outline"></i>
      </div>
    </template>
  </el-image>
</template>

<script>
export default {
  name: 'ex_image_view',
  components: {},
  data() {
    return {

    }
  },
  created() {
  },
  computed: {
    _real_url: function () {
      return this.formatterUrl(this.src)
    },
    _real_preview: function () {
      return _.isEmpty(this.previewSrcList) ? [] : this.previewSrcList.map(it => this.formatterUrl(it))
    },
  },
  props: {
    oss: {
      type: Boolean,
      default: true,
    },
    src: '',
    previewSrcList: [],
  },
  methods: {
    showPreview(){
      this.$refs.img.showViewer = true
    },
    _isURL(str_url) {
      var re = new RegExp(/^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\*\+,;=.]+$/);
      if (re.test(str_url)) {
        return (true);
      } else {
        return (false);
      }
    },
    formatterUrl(item) {
      if(_.isEmpty(item)){
        return null
      }else if(this._isURL(item)){
        return item
      }else if(this.oss){
        return this.$ex_default_download_url + item
      }else{
        return item
      }
    },
  },

}
</script>
<style>
.image_error_div {
  width: 100%;
  height: 100%;
  font-size: 30px;
  background-color: #c4c6ca;
}

.defaultImageSize {
  /* width:60px;
  height:60px; */
}
</style>
